<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0px; margin:0px;}
body{ overflow:hidden}
#main{width:200px; height:200px; position:absolute; left:0px; top:0px;}
.dir_37{transform:rotateY(180deg)}
.dir_38{transform:rotate(-60deg)}
.dir_40{transform:rotate(60deg)}
</style>
<script>
window.onload=function(){
	var oBird=document.getElementById('main');
	var screenwidth=document.documentElement.clientWidth;
	var screenheight=document.documentElement.clientHeight;
	var speed=15;
	document.onkeydown=function(even){
		var key=even.keyCode;
			oBird.className="dir_"+key;
		switch(key){
			case 37:
				oBird.style.left=oBird.offsetLeft-speed+'px';
				if(-oBird.offsetLeft>oBird.offsetWidth){
					oBird.style.left=screenwidth+'px';
					}
				break;
			case 39:
				oBird.style.left=oBird.offsetLeft+speed+'px';
				if(oBird.offsetLeft>=screenwidth){
					oBird.style.left=-oBird.offsetWidth+'px';
					}
				break;
			case 38:
				oBird.style.top=oBird.offsetTop-speed+'px';
				if(-oBird.offsetTop>=oBird.offsetHeight){
					oBird.style.top=screenheight+'px'
					}
				break;
			case 40:
				oBird.style.top=oBird.offsetTop+speed+'px';
				if(oBird.offsetTop>=screenheight){
					oBird.style.top=-oBird.offsetHeight+'px';
					}
				break;
			}
		}
	}
</script>
</head>

<body>
<div id="main" ><img src="1.gif" width="200px"></div>
</body>
</html>
